import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { FauxInput } from '@zendeskgarden/react-forms';
import { FauxInputStory } from './stories/FauxInputStory';
import { commonArgs, commonArgTypes, fieldSubcomponents } from './stories/common';
import README from '../README.md';

<Meta
  title="Packages/Forms/FauxInput"
  component={FauxInput}
  subcomponents={{
    'FauxInput.EndIcon': FauxInput.EndIcon,
    'FauxInput.StartIcon': FauxInput.StartIcon,
    ...fieldSubcomponents
  }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="FauxInput"
    args={{
      children: '',
      hasEndIcon: false,
      hasStartIcon: false,
      ...commonArgs
    }}
    argTypes={{
      /* ensures the `validation` story arg for the `FauxInput` component is not overriden */
      ...{ ...commonArgTypes, validation: {} },
      isEndIconRotated: {
        name: 'isRotated',
        control: 'boolean',
        table: { category: 'FauxInput.EndIcon' }
      },
      isStartIconRotated: {
        name: 'isRotated',
        control: 'boolean',
        table: { category: 'FauxInput.StartIcon' }
      },
      hasStartIcon: { name: 'FauxInput.StartIcon', table: { category: 'Story' } },
      hasEndIcon: { name: 'FauxInput.EndIcon', table: { category: 'Story' } },
      placeholder: { control: 'text' }
    }}
    parameters={{
      design: {
        allowFullscreen: true,
        type: 'figma',
        url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=103%3A20266'
      }
    }}
  >
    {args => <FauxInputStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
